<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 20px;
            font-family: microsoft-YaHei;
        }

        li {
            list-style: none;
        }

        .box {
            width: 100%;
            position: relative;
        }

        .refresh {
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: #e5e5e5;
            position: absolute;
            top: -60px;
        }

        .ul {
            width: 100%;
            overflow: hidden;
            text-align: center;
        }

        .ul li {
            width: 94%;
            height: 80px;
            line-height: 80px;
            margin: 5px auto;
            color: #008B8B;
            border: 1px solid black;
            border-radius: 5px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background: lightblue;
        }

        .load {
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background: #e5e5e5;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="refresh">刷新</div>
    <ul class="ul">

    </ul>
    <div class="load"></div>
</div>
</body>
<script>

    var box = document.querySelector(".box");
    var refresh = document.querySelector(".refresh");
    var ul = document.querySelector(".ul");
    var load = document.querySelector(".load");
    var j = 10;//加载j调数据

    //创建一个arr,假设它是后台获取到的arr,有37项
    var arr = [];
    for (var i = 0; i < 37; i++) {
        arr.push("我是第" + (i+1) + "个li");
    }

    //下拉刷新功能
    (function downRefresh() {
        var positionY;//手指刚接触屏幕时候的位置
        var nowpositionY;//手指滑动过程中不断变化的位置
        var distance;//以上两个位置的差值,即手指划过的距离

        box.addEventListener("touchstart", function (e) {
            positionY = e.touches[0].clientY;//记一下开始位置
        });

        box.addEventListener("touchmove", function (e) {
            nowpositionY = e.touches[0].clientY;
            //移动距离最大200
            distance = nowpositionY - positionY > 200 ? 200 : nowpositionY - positionY;
            //只有下拉盒子才会动,上拉默认使用手机自带的滑动功能
            if (distance > 0) {
                this.style.transform = "translateY(" + distance + "px)";
            }
        });

        window.addEventListener("touchend", function () {
            if (distance > 60) {
                box.style.transform = "translateY(60px)";
                refresh.innerText = "正在刷新...";
                //为了看起来直观,1s后再刷新
                setTimeout(function () {
                    window.history.go(0);
                }, 1000)
            } else {
                box.style.transform = "none";
            }
        });
    })();

    //上滑加载更多
    window.onscroll = function () {

        if ((window.scrollY + window.screen.height) > ul.offsetHeight + load.offsetHeight - 1) {
            load.innerText = "正在加载...";

            if (j >= arr.length) {
                load.innerText = "- 没有更多的内容了 -"
            } else {
                //每次10条,如果超过arr长度,就arr.length条
                j = j + 10 > arr.length ? arr.length : j + 10;
                add();
            }

        }

    };

    //加载更多的li
    function add() {
        var str = '';
        for (i = 0; i < j; i++) {
            str += "<li>" + arr[i] + "</li>";
        }
        ul.innerHTML = str;
    }

    //上来加载十个li
    add();

</script>
</html>